<template>
    <view class='page report'>
        <img style="width: 100%;z-index: -1;display: block;7" src="../../static/titleBoxResult.png" alt="">
        <view class="subTitletop">
            <view style="">2024年食品安全</view>
            <view>“你点我检”进景区服务活动</view>
        </view>
        <view class="formBox">
            <view class="page-form">
                <!-- <view class="Ttitle">
                    食品安全“你点我检”调查问卷
                </view> -->
                <view class="subtitle">
                    <!-- 第二期活动 -->
                    <view style="">食品安全“你点我检”进景区</view>
                    <view>调查问卷</view>
                </view>
                <view class="topicItemBox">
                    <view v-for="(item, index) in topicList" :key="index" class="topicItem">
                        <!-- {{item.check}} -->
                        <view class="title">{{ index + 1 }}.{{ item.title }}</view>
                        <!-- <view v-if="item.topicItem[0].textAll">
                            <view v-for="(itemin, indexin) in item.topicItem" :key="indexin" class="textAllContent"
                                :style="indexin == item.topicItem.length - 1 ? 'border:none;padding-bottom:0' : ''">
                                {{ itemin.textAll.text }}
                                <view v-for="(itemch, indexch) in itemin.children" :key="indexch" class="contentItem">
                                    <view>
                                        {{ itemch.text }}
                                    </view>
                                    <view>
                                        {{ itemch.total||0 }}票
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view v-else> -->
                            <view v-for="(itemin, indexin) in item.topicItem" :key="indexin">
                                <view class="contentItem">
                                    <view>
                                        {{ itemin.note }}
                                    </view>
                                    <view>
                                        {{ itemin.total||0 }}票
                                    </view>
                                </view>
                            </view>
                        <!-- </view> -->
                    </view>
                    <!-- <view class="topicItem" style="border:none;padding-bottom:0;">
                        <view class="title">5.除了以上普通食品及农产品品种，您还认为哪些食品及农产品安全风险较高?</view>
                        <uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
                    </view> -->

                </view>
                <!-- <view class="textAgg" @click="showAgreement">
                我已阅读并同意《用户协议》和《隐私政策》
            </view> -->
            </view>
            <!-- <button type="primary" @click="submit('valiForm')" class='btn'>立即上报</button> -->
            <view class="cc-bottom ">
                呼和浩特市市场监督管理局
            </view>
        </view>

        <!-- <cc-bottom :isFixed='false' /> -->
        <!-- <popup ref="affirm" @getdata="getdata" title="用户隐私协议" width="600rpx" :isShowCancel="false" :top="0">
        <template #body>
          <view class="affirmBody"> 
			  <scroll-view style="height:100%" scroll-y="true"> <view v-html="text" class="content"></view></scroll-view>
			 
		  </view>
        </template>
      </popup> -->
    </view>
</template>

<script>
import ldSelect from '../../components/ld-select/ld-select.vue' //补存信息
import ccBottom from '../../components/cc-bottom/cc-bottom.vue' //补存信息
import Api from '@/utils/request/api.js'
import popup from "@/components/popup.vue";
import { text } from './agreement.js'
export default {
    components: {
        ldSelect,
        ccBottom,
        popup
    },
    data() {

        return {
            topicList: [
                {
                    title: '请选择您认为应该抽检我市哪些景区的餐馆、超市、特产店等食品经营单位（多选）',
                    check: [],
                    dataKey: 'area',
                    topicItem: []
                },
                {
                    title: '请选择您认为在景区的餐馆、超市、特产店等食品经营单位中应该重点抽检哪些产品（多选）',
                    check: [],
                    dataKey: 'business',
                    topicItem: []
                },
            ],
        }
    },
    onLoad(op) {
        this.getScenicList()
        this.getProductList()
        setTimeout(()=>{
            
        this.getInfoM()
        },1000)
        // let that = this
        // // 回显
        // this.getDic()
        // setTimeout(function () {
        //     if (op.type == '0') {
        //         that.valiFormData.flag = 1
        //     } else {
        //         that.valiFormData.flag = 2
        //     }

        //     that.chooseFlag(that.valiFormData.flag)
        // }, 1000)


        // console.log(that.valiFormData)
    },
    onReady() {
        // 需要在onReady中设置规则
        // this.$refs.valiForm.setRules(this.rules)
    },
    methods: {
        getScenicList() {
            Api.scenicList().then(res => {
                this.topicList[0].topicItem = res.data
            })
        },
        getProductList() {
            Api.productList().then(res => {
                this.topicList[1].topicItem = res.data
            })
        },
        setNum(e) {
            this.setnum = e.detail.value ? Number(e.detail.value) : 0
            console.log(e.detail.value);
        },
        getdata() {
            this.$refs.affirm.close();
            // getInfo
        },
        showAgreement() {
            this.$refs.affirm.open();
        },
        totalNumberOfPeopleChange(e, key) {
            var numReg = /^[0-9]*$/
            var numRe = new RegExp(numReg)

            if (!numRe.test(e)) {
                this.valiFormData[key] = ''
            }
            console.log(Number(e) > 1000000);
            if (Number(e) > 1000000) {
                this.valiFormData[key] = 1000000
                this.valiFormData = JSON.parse(JSON.stringify(this.valiFormData))
                console.log(this.valiFormData);
                this.$forceUpdate()
            }
            this.valiFormData = {
                ...this.valiFormData,
                // sex: '1'
            }
        },
        submit(ref) {
            console.log(this.valiFormData);
            this.$refs[ref].validate().then(res => {
                console.log('success', res);
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                Api.addInfo(res).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        uni.showToast({
                            title: `上报成功`
                        })
                        this.valiFormData = {}
                        // setTimeout(() => {
                        //     uni.navigateBack()
                        // }, 1000);
                        // uni.navigateTo({
                        // 	url:'/pages/login/login'
                        // })
                        uni.hideLoading()
                    } else {
                        uni.hideLoading()
                    }
                })

            }).catch(err => {
                console.log('err', err);
            })
        },
        // 多选全选
        changetextAll(e, index) {
            let item = this.topicList[2].topicItem[index]
            item.check = []
            if (e.detail.data.length) {
                for (var i in item.children) {
                    item.check.push(item.children[i].value)
                }
                console.log('选中')
            }
            else {
                console.log('清空')
            }
        },
        settopicList(valItem, index1, index2) {
            if (index2) {
                for (var t in this.topicList[index1].topicItem[index2].children) {
                    // console.log(this.topicList[index1].topicItem[index2].children[t].value);
                    if (valItem.item == this.topicList[index1].topicItem[index2].children[t].value) {
                        // this.topicList[index1].topicItem[index2].children[t].total = valItem.total
                        this.$set(this.topicList[index1].topicItem[index2].children[t], 'total', valItem.total)
                    }
                }
            }
            else {

            }
        },
        getInfoM() {
            console.log(this.topicList);
            Api.getInfo().then(val => {
                // console.table(val.data);
                for (var i in val.data) {

                    // for (var t in this.topicList) {
                    //     if (this.topicList[t].dataKey&&this.topicList[t].dataKey == val.data[i].topic) {
                    //         for (var m in this.topicList[t].topicItem) {
                    //             console.log(this.topicList[t].topicItem[m]);
                    //             if(this.topicList[t].topicItem[m].value==val.data[i].item){
                    //                 this.topicList[t].topicItem[m].total=val.data[i].total
                    //             }
                    //         }
                    //     }
                    // }
                    // return
                    if (val.data[i].topic == 'scenic') {
                        for (var t in this.topicList[0].topicItem) {
                            if (val.data[i].item == this.topicList[0].topicItem[t].value) {
                                // this.topicList[0].topicItem[t].total = val.data[i].total
                                this.$set(this.topicList[0].topicItem[t], 'total', val.data[i].total)
                                // this.topicList[1].topicItem[t].total = val.data[i].total
                            }
                        }
                    }
                    if (val.data[i].topic == 'product') {
                        for (var t in this.topicList[1].topicItem) {
                            if (val.data[i].item == this.topicList[1].topicItem[t].value) {
                                this.topicList[1].topicItem[t].total = val.data[i].total
                            }
                        }
                    }





                    // this.$forceUpdate();

                }
            })
        }
    }

}
</script>

<style scoped lang="scss">
.report {
    .report_title {
        // margin: 5px;
        // padding: 5px;
        margin-bottom: 30rpx;

        .report_line {
            width: 8rpx;
            height: 36rpx;
            margin-right: 10px;
            border-radius: 10px;
            background-color: #0e2966;
        }

        font-size: 30rpx;
        display: flex;
        color: #0e2966;
        font-weight: 600;
    }

    /deep/.uni-forms-item__label {
        font-weight: 600 !important;
        color: #333;
        font-size: 29rpx;
    }

    /deep/uni-text {
        text-align: center !important;
    }
.subTitletop{
    position: absolute;
    right: 20rpx;
    top: 150rpx;
    color: rgba(255, 255, 255, 0.5);
    font-size: 30rpx;
    width: 55%;
    text-align: end;
}
}

.formBox {
    // background-color: #9cc2ff;
    background-image: linear-gradient(to bottom, #060C63, #102284 70%, #060C63);
    z-index: 10;
    padding: 30rpx;
}

.page-form {
    border-radius: 20rpx;
    padding: 40rpx 20rpx;
    // margin-top: 50rpx;
    // background-color: #b6cdfc;
    background-color: rgba($color: #fff, $alpha: 0.01);
    border: rgba(255, 255, 255, 0.3) 0.5px solid;
    z-index: 10;
    color: #fff;

    .Ttitle {
        color: #fff;
        // color: #022ba7;
        font-size: 36rpx;
        padding-bottom: 40rpx;
        text-align: center;
        border-bottom: 1px dashed;
        /*设置线性渐变*/
        border-image: linear-gradient(90deg,
                rgba(0, 216, 247, 0) 0%,
                rgba(255, 255, 255, 0.7) 50%,
                rgba(0, 216, 247, 0) 100%) 2 2 2 2;
    }
    .subtitle{
        text-align: center;
        font-size: 40rpx;
        font-weight: 600;
        border-bottom: 1px dashed;
        padding-bottom: 20rpx;
        /*设置线性渐变*/
        border-image: linear-gradient(90deg,
                rgba(0, 216, 247, 0) 0%,
                rgba(255, 255, 255, 0.7) 50%,
                rgba(0, 216, 247, 0) 100%) 2 2 2 2;

    }

    .topicItemBox {
        padding: 20rpx 0 0 0;

        // border-bottom: 1px dashed;
        // /*设置线性渐变*/
        // border-image: linear-gradient(
        //         90deg,
        //         rgba(0, 216, 247, 0) 0%,
        //         rgba(255, 255, 255, 0.7) 50%,
        //         rgba(0, 216, 247, 0) 100%
        //     )
        //     2 2 2 2;
        .topicItem {
            padding: 30rpx 0;
            border-bottom: 1px dashed;
            /*设置线性渐变*/
            border-image: linear-gradient(90deg,
                    rgba(0, 216, 247, 0) 0%,
                    rgba(255, 255, 255, 0.7) 50%,
                    rgba(0, 216, 247, 0) 100%) 2 2 2 2;

            .title {
                padding-bottom: 20rpx;
            }

            .textAllTitle {
                padding: 0rpx 0 10rpx 0;
                margin-top: 30rpx;
            }

            .textAllContent {
                padding: 0 0rpx 30rpx 30rpx;
                margin-bottom: 30rpx;
                border-bottom: 1px dashed;
                /*设置线性渐变*/
                border-image: linear-gradient(90deg,
                        rgba(0, 216, 247, 0) 0%,
                        rgba(255, 255, 255, 0.7) 50%,
                        rgba(0, 216, 247, 0) 100%) 2 2 2 2;
            }

            .contentItem {
                padding: 0 30rpx;
                display: flex;
                justify-content: space-between;
            }

            /deep/.uni-easyinput__content {
                background: transparent !important;
            }
        }
    }
}

.affirmBody {
    height: 600rpx;
    /* overflow: auto; */
    padding: 22rpx;
}

/* .affirmBody .content{
		overflow: auto;
		height: 100%;
	} */
.textAgg {
    font-family: PingFang SC Regular;
    font-size: 26rpx;
    font-weight: normal;
    line-height: 80rpx;
    letter-spacing: 0px;
    color: #969696;
    text-align: center;
    margin-top: 30rpx;
}

.textphone {
    font-family: PingFang SC Regular;
    font-size: 24rpx;
    font-weight: normal;
    line-height: 60rpx;
    letter-spacing: 0px;
    color: rgba(230, 162, 50, 1);
    margin-top: -15rpx;
}

.page h1 {
    font-size: 40rpx;
    font-weight: normal;
    padding: 20rpx;
}

.btn {
    font-size: 30rpx;
    width: calc(100vw - 60rpx);
    margin-top: 40rpx;
    // 699CFF/
    // 3F74FF
    background-image: linear-gradient(to right, #699cff, #3f74ff);
}
.cc-bottom {
    text-align: center;
    padding: 50rpx;
    color: #fff;
    font-size: 34rpx;
    // font-weight: 600;
}
</style>
